
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解构赋值的用途</title>
</head>
<body>
    
    <script>
        // 1:交换两个变量的值 
        // let a = 10, b =20;
        // let c;
        // c = a;
        // a = b;
        // b = c;
        // console.log(a,b);

        // console.log([a,b] = [b,a]);
        
        
        //2：从函数返回多个值
        //返回数组
        function fn() {
            return [1,2,3,4,5]
        }

        var [a,b,c,d,f] = fn();
        console.log(a,b,c,d,f)


        //返回对象
        function fn1() {
            return {
                foo:1,
                bar:2
            }
        }

        var {foo,bar} = fn1();
        console.log(bar,foo)


        // 3:函数参数的定义
        function fn2([x,y,z]) {
            return x+y+z
        }

        console.log(fn2([1,2,3]))


        //4::函数参数的默认值
        function fn3([x=4,y=5,z=6]) {
            return x+y+z
        }

        console.log(fn3([1,2,3]))


        //5:提取JSON数据   模拟的是后台返回json数据  写代码中的场景
        var dataJson = {
            "id":1,
            "status":"ok",
            "data":[1,2,3,4,5,6,7,8]
        }

        var {id,status,data:arr} = dataJson;
        console.log(id,status,arr);




    </script>
</body>
</html>